<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <span>姓名：{{person.name}}</span>
        <span>年龄：{{person.age}}</span>
        <span>性别：{{person.sex}}</span>
        <button @click="handlenameClick">修改姓名</button>
        <button @click="handleageClick">修改年龄</button>
        <button @click="handlesexClick">修改性别</button>
        
    </div>

    <script>
    var app = new Vue({
      el: '#app',
    data:{ 
      person:{
        name:"张三",
        age:21,
        sex:"男"
    }
    },
    methods:{
          handlesexClick(){
            this.person.sex = "女"
          },
          handleageClick(){
            this.person.age = "18"
          },
          handlenameClick(){
            this.person.name = "牛花花"
          }
    }

    })


    </script>
</body>
</html>